<template>
  <div id="devicePage" class="wrapper">
    <div class="ur-form mb-3 d-flex align-items-center">
      责任区：
      <el-select class="w150 mr-2" v-model="regionId" slot="prepend" placeholder="请选择" size="small" @change="currentPage=1,search()">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="(item,index) in regions" :key="index" :label="item.Name" :value="item.Id"></el-option>
      </el-select>
      <el-input placeholder="请输入内容"  class="input-with-select w250 "  size="small" v-model="searchTxt" @blur="currentPage=1,search()">
        <el-button slot="append"  class="ur-btn ur-btn-primary" @click="currentPage=1,search()"> <i class="iconfont icon-search"></i>查询</el-button>
      </el-input>
      <el-button class="ur-btn ur-btn-primary ml-2" @click="showMeterAdd=true,meter.Id=0"><i class="iconfont icon-add"></i>添加</el-button>
    </div>
    <!--表格-->
    <el-table class="ur-table w-100" stripe :data="tables.datas" :height="clientHeight-210"
              highlight-current-row @selection-change="selsChange" @row-click="rowClick">
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
      <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :min-width="v.width" align="center" :key="index">
        <template slot-scope="scope" >
          <span>{{scope.row[v.field]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120">
        <template slot="header" slot-scope="scope">操作</template>
        <template slot-scope="scope">
          <el-button class="ur-btn ur-btn-waring d-inline-block">
            <i class="font18 iconfont icon-edit mr-0" @click="handleEdit(scope.$index, scope.row,true)"></i>
          </el-button>
          <el-button class="ur-btn ur-btn-danger d-inline-block">
            <i class="font18 iconfont icon-delete mr-0" @click="handleDel(scope.$index, scope.row)"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt-3">
      <el-button  class="float-left" type="danger" @click="batchRemove"  :disabled="sels.length===0">批量删除</el-button>
      <el-pagination class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[100,200,500,1000]" :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
    </div>

    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="传感器" :visible.sync="showMeterAdd" width="430px" @close="search" :append-to-body="true">
      <template v-if="showMeterAdd">
        <meter-add :meter="meter" @close="showMeterAdd=false"></meter-add>
      </template>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  import uMap from 'base/map/map'
  import elDragDialog from 'directive/el-dragDialog'
  import meterAdd from "./meter-add"

  export default {
    directives:{elDragDialog},
    components: {meterAdd, uMap},
    props: {},
    data() {
      return {
        regionId:-1,
        regions:[],
        total: 0,
        currentPage: 1,
        pageSize:100,
        searchTxt:null,
        tables: {
          sel: null,//选中行
          columns: [
            {field: "LightSourceType", title: "型号", width: '120'},
            {field: "InstallPosition", title: "通讯地址", width: '150'},
            {field: "LightType", title: "波特率", width: '80'},
            {field: "PoleType", title: "通讯模式", width: '80'},
            {field: "Lamps", title: "所属回路", width: '60'},
          ],
          datas: []
        },
        sels:[],
        meter:{Lamps:1},
        showMeterAdd:false,
      }
    },
    watch: {},
    computed: {
      getGidData(){
        if(this.tables.datas.length){
          return this.tables.datas.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        }
      },
      ...mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
        limits:state=>state.user.userInfo.limits
      }),
    },
    methods: {
      batchAddPole(){
        this.batchPoleDialog=true
      },
      indexMethod(index) {
        return index + 1
      },
      rowClick(row, event, column){
      },
      selsChange(sels) {
        this.sels = sels
        this.sels.splice(1,0)
      },
      handleSizeChange(val) {
        this.pageSize=val
        this.currentPage=1
        this.search()
      },
      handleCurrentChange(val) {
        this.currentPage=val
        this.search()
      },
      handleEdit(index, row, isEdit) {
        this.meter=row
        this.showMeterAdd=true
      },
      handleDel(index, row) {
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            this.$message.success('删除成功')
           /* api.fetch('/Pole/Delete',[row.Id])
              .then(r=>{
                this.search()
              })*/
          })
      },
      batchRemove() {
        let ids=[]
        this.sels.map(r=>{
          ids.push(r.Id)
        })
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
           /* api.fetch('/Pole/Delete',ids)
              .then(r=>{
                this.$message.success('删除成功')
                this.search()
              })*/
          })
      },
      search(){
        for(let i=0;i<10;i++){
          let o={AreaId: 1, AreaName: "川沙", BaseForm: 1, BaseSpec: 1, BoxId: 1, BoxNo: "20446",
            ChannelMode: null, ControlInstalled: 0, Created: "2017-12-11 17:12:19", Deleted: 0,
            DevAddr: null, ErectionMode: 1, Height: 10.5, Id: 1, InstallPosition: "申江路", Lamps: 1,
            Lat: 31.2001983544, LightSourceType: 4, LightType: 4, Lng: 121.62536174, Manufacturer: "燎扬", Material: 1,
            No: "20446101", OverheadName: "", PoleShape: 2, PoleType: 3, RoadEnd: "申江路", RoadSection: "申江路",
            RoadStart: "申江路", RtuId: 1, RtuXh: 0, RunDate: "2009-09-09 00:00:00", SimOprators: null,
            State1: 0, State2: 0, State3: 0, SwitchNo: 1, SwitchXh: 1, TunnelName: "",
            Updated: "2020-06-27 21:03:13", WellInstalled: 0, WellLayout: 1}
          this.tables.datas.push(o)
        }
      },
    },
    created() {

      this.search()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
